<template>
  <div class="container">
    <p ref="p"></p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      str: '   你不知道你的影子多么调皮，总在我的眼前晃动，让我不能有一刻安宁。坏男孩从早上睁开朦胧眼睛的那一刻起，到枕着你的名字入眠进入梦乡，你的影子一直陪着我。 你并不是什么地方都好，你只是什么地方都让我忘不了，我也不是什么地方都坏，只是我愿意为你把坏的地方更改，人无完人，我要感谢上天给我与你相遇的幸运，心有真心，让我们一起走进向往中的春。',
      curIndex: 0,
      timer: null,
      colorList: [ 'red', 'darkred', 'green', 'pink', 'Blue', 'Indigo', 'Violet' ]
    }
  },
  mounted () {
    setTimeout(() => {
      this.timer = setInterval(this.inner, 200)
    }, 100)
  },
  beforeDestroy () {
    clearInterval(this.timer)
    this.timer = null
  },
  methods: {
    inner () {
      if (this.curIndex++ < this.str.length) {
        const span = document.createElement('span')
        const isBlank = this.str.slice(this.curIndex, this.curIndex + 1) === ' '
        span.innerHTML = isBlank ? '&#x3000;' : this.str.slice(this.curIndex, this.curIndex + 1)
        const num = (Math.random() * 6).toFixed()
        span.style.color = this.colorList[num]
        this.$refs.p.appendChild(span)
      } else {
        clearInterval(this.timer)
        this.timer = null
      }
    }
  }
}
</script>

<style lang="less" scoped>
</style>
